<template>
	<view class="home">
		<view class="header">
			<view class="select-view">
				<view class="type" :class="[selectedTypeShow ? 'active' : '']" @click="handleTypeClick">
					<text>{{currType}}</text>
					<text class="iconfont icon-caidan"></text>
				</view>
				<view class="date" :class="[selectedDateShow ? 'active' : '']" @click="handleDateClick">
					<text>{{currDate}}</text>
					<text class="iconfont icon-xiala"></text>
				</view>
				<!-- <view class="pay" :class="[selectedPayShow ? 'active' : '']" @click="handlePayClick">
					<text>{{currAccount}}</text>
					<text class="iconfont icon-xiala"></text>
				</view> -->
			</view>
			<view class="account-num">	
				<text>1月分总支出为2022</text>
			</view>
		</view>
		<view class="home-main">
			<view class="account-info" v-for="item in accountList" :key="item.date">
				<view class="account-info-header">
					<view class="date">
						<text>{{item.month}}</text>
						<text>周五</text>
					</view>
					<view class="count">
						<text>支出总额</text>
						<text>{{item.paySum}}</text>
					</view>
				</view>
				<view class="account-info-content">
					<view class="info-list" v-for="el in item.list" :key="el.id">
						<view class="info-mark">
							<text :class="['iconfont ' + el.icon]"></text>
						</view>
						<view class="info-title">	
							<text>{{el.name}}</text>
							<text class="info-money">{{el.consumption_money}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="add-btn" @click="handleAddClick">
			<text class="iconfont icon-jilu"></text>
			<text>记一笔</text>
		</view>
		<!-- 类型组件 -->
		<Type :typeShowModal='typeShowModal' @selectedType="selectedType" @closeType="closeType" />
		<!-- 时间组件 -->
		<Date :dateShowModal='dateShowModal' @selectedDate="selectedDate" @closeDate="closeDate" />
		<!-- 账单类型组件 -->
		<Pay :payShowModal='payShowModal' @selectedPay="selectedPay" @closePay="closePay" />
		<!-- 记一笔组件 -->
		<AddAccount ref="addAccountType" :addShowModal='addShowModal' @selectedAdd="selectedAdd" @closeAdd="closeAdd" />
	</view>
</template>

<script>
	import Type from './components/Type.vue'
	import Date from './components/Date.vue'
	import Pay from './components/Pay.vue'
	import AddAccount from './components/AddAccount.vue'
	import {defineComponent, onMounted, ref, reactive, toRefs} from 'vue'
	import {getAccount} from '../../api/app.js'
	import {typeConfig} from '../../utils/config.js'
	export default defineComponent({
		components: {
			Type,
			Date,
			Pay,
			AddAccount
		},
		data() {
			return {}
		},
		onLoad() {},
		methods: {},
		setup() {
			const addAccountType = ref(null);
			const state = reactive({
				selectedTypeShow: false,
				selectedDateShow: false,
				selectedPayShow: false,
				addShowModal: false,
				typeShowModal: false,
				dateShowModal: false,
				payShowModal: false,
				currType: '全部类型',
				currTypeValue: '',
				currDate: '选择日期',
				currDateValue: '',
				currAccount: '账单类型',
				accountList: [],
				pageNum: 1,
				pageSize: 10,
				total: 0
			})
			
			const getPayList = () => {
				let params = {
					pageNum: state.pageNum,
					pageSize: state.pageSize,
					type_id: state.currTypeValue,
					expenditure_date: state.currDateValue
				}
				getAccount(params).then(res=> {
					console.log(res)
					const {code, data} = res
					if (code === 200) {
						const list = data.list
						var hist = list.reduce(function (prev, item) {
						    var d = item.expenditure_date.split("-");
						    var date = d[0] +'-' +d[1] +'-'+ d[2];
						    if (date in prev)
						        prev[date].push(item);
						    else
						        prev[date] = [item];
						
						    return prev;
						}, {} );
						let currList = []
						for(let val in hist) {
							let str = val.split('-')[1] +'月' + val.split('-')[2] +'日'
							currList.push({
								date: val,
								month: str,
								list: hist[val]
							})
						}
						
						currList.forEach(item=> {
							let list = item.list;
							let paySum = 0
							list.forEach(el=> {
								paySum = paySum + el.consumption_money * 10000
								el.icon = typeConfig[el.name]
							})
							item['paySum'] = paySum / 10000
						})
						console.log(currList)
						state.accountList = currList
					}
				})
			}
			
			onMounted(() => {
				getPayList()
			})
			
			// 展示类型弹窗
			const handleTypeClick = () => {
				state.selectedTypeShow = true;
				state.typeShowModal = true;
				uni.hideTabBar()
			}
			// 关闭类型弹窗
			const closeType = () => {
				state.selectedTypeShow = false;
				state.typeShowModal = false;
				uni.showTabBar()
			}
			// 选择类型
			const selectedType = (el) => {
				state.selectedTypeShow = false;
				state.typeShowModal = false;
				state.currType = el.name;
				state.currTypeValue = el.id;
				uni.showTabBar()
			}
			// 选择时间的弹窗
			const handleDateClick = () => {
				state.selectedDateShow = true;
				state.dateShowModal = true;
				uni.hideTabBar()
			}
			// 关闭时间弹窗
			const closeDate = () => {
				state.selectedDateShow = false;
				state.dateShowModal = false;
				uni.showTabBar()
			}
			// 选择时间
			const selectedDate = (el) => {
				state.selectedDateShow = false;
				state.dateShowModal = false;
				state.currDate = el.year + '年' + el.month +'月'
				state.currDateValue = el.year + '-' + el.month
				uni.showTabBar()
			}
			// 选择账单类型弹窗
			const handlePayClick = () => {
				state.selectedPayShow = true;
				state.payShowModal = true;
				uni.hideTabBar()
			}
			// 关闭账单类型弹窗
			const closePay = () => {
				state.selectedPayShow = false;
				state.payShowModal = false;
				uni.hideTabBar()
			}
			// 选择账单类型
			const selectedPay = (el) => {
				state.selectedPayShow = false;
				state.payShowModal = false;
				state.currAccount = el.name;
				uni.showTabBar()
			}
			// 记一笔弹窗
			const handleAddClick = (el) => {
				state.addShowModal = true;
				uni.showTabBar()
				addAccountType.value.getType()
			}
			
			// 关闭记一笔弹窗
			const closeAdd = () => {
				state.addShowModal = false;
				uni.showTabBar()
			}
			// 选择记一笔
			const selectedAdd = () => {
				state.addShowModal = false;
				uni.showTabBar()
			}
			
			return {
				addAccountType,
				...toRefs(state),
				handleTypeClick,
				handleDateClick,
				closeType,
				selectedType,
				closeDate,
				selectedDate,
				handlePayClick,
				selectedPay,
				closePay,
				handleAddClick,
				closeAdd,
				selectedAdd
			}
		}
	})
</script>

<style scoped>
	.home {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	.home>.header {
		background: #05ad53;
		color: #fff;
		padding: 10px;
	}
	.select-view{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-bottom: 10px;
		font-size: 13px;
	}
	.home>.header .type{
		display: flex;
		align-items: center;
		padding: 3px 6px;
		border-radius: 4px;
	}
	.home>.header .type text{
		cursor: pointer;
	}
	.home>.header .type .iconfont{
		fonr-size: 16px;
		margin-left: 6px;
	}
	.select-view .date{
		padding: 3px 6px;
		border-radius: 4px;
	}
	.select-view .date .iconfont{
		margin-left: 6px;
	}
	.home>.header .type.active{
		background: #038f42;
	}.header .date.active{
		background: #038f42;
	}
	.account-num{
		font-size: 14px;
		text-align: center;
	}
	.uni-list-cell-db{
		display: flex;
		align-items: center;
		
	}
	.uni-list-cell-db .iconfont{
		margin-left: 6px;
	}
	.add-btn{
		position: fixed;
		right: 20px;
		bottom: 40px;
		display: flex;
		align-items: center;
		color: #038F42;
		border-radius: 20px;
		padding: 8px 12px;
		box-shadow: 0px 0px 10px #ddd;
		background: #fff;
	}
	.add-btn text{
		font-size: 12px;
	}
	.add-btn .iconfont {
		font-size: 20px;
		margin-right: 5px;
	}
	.home-main{
		height: calc(100% - 72px);
		overflow: auto;
		background: #ddd;
		padding: 10px;
	}
	.account-info{
		background: #ffff;
		margin-bottom: 10px;
		border-radius: 6px;
	}
	.account-info-header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		background: #efefef;
		padding: 15px;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	}
	.account-info-header .date text:nth-child(1) {
		margin-right: 10px;
	}
	.account-info-header .count text:nth-child(1) {
		margin-right: 10px;
	}
	.account-info-content{
		padding: 15px;
	}
	.info-list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}
	.info-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 1;
		border-bottom: 1px solid #eee;
		padding-bottom: 10px;
	}
	.info-title text:nth-child(1) {
		font-size: 12px;
	}.info-title text:nth-child(2) {
		font-size: 18px;
		font-weight: 500;
	}
	.info-mark{
		padding: 5px;
		background-color: #038F42;
		border-radius: 100%;
		margin-right: 8px;
	}
	.info-mark .iconfont{
		font-size: 18px;
		color: #fff;
	}
</style>
